<template>
  <div id="bigdataBox" class="res clearfix displayFlex flexSit space_betweens spaceSize dasAutoSlight unitKind allInRoll cnimaLoop bokAutoIn cnimaLoop bokAutoIn cfotkop animations">
    <section id="header" class="spaceSize dasAutoSlight clearfix displayFlex unitKind allInRoll cnimaLoop bokAutoIn cnimaLoop bokAutoIn"></section>
    <section id="content" class="spaceSize dasAutoSlight displayFlex unitKind allInRoll cnimaLoop bokAutoIn cnimaLoop bokAutoIn spaces space_been slex space_between">
       <div class="content_left displayFlex unitKind allInRoll cnimaLoop autoPosition layoutSize">
          <div class="content_left_xsdd content_qk displayFlex unitKind allInRoll cnimaLoop autoPosition">
            <div class="content_qk_tit displayFlex unitKind allInRoll cnimaLoop res resex autoPosition">
              <img src="../../assets/bigdataStyle/images/sj-icon.png" class="sj-icon displayFlex unitKind" alt="">
              <span class="displayFlex unitKind">销售订单统计表</span>
              <img src="../../assets/bigdataStyle/images/zs-icon.png" class="zs-icon displayFlex unitKind auto_cens auto_pos" alt="">
            </div>
            <div id="echartsXsdd" class="content_qk_con displayFlex unitKind allInRoll cnimaLoop autoPosition"></div>
          </div>
          <div class="content_left_scjd content_qk displayFlex unitKind allInRoll cnimaLoop autoPosition">
            <div class="content_qk_tit displayFlex unitKind allInRoll cnimaLoop res resex autoPosition">
              <img src="../../assets/bigdataStyle/images/sj-icon.png" class="sj-icon displayFlex unitKind" alt="">
              <span class="displayFlex unitKind">生产进度</span>
              <img src="../../assets/bigdataStyle/images/zs-icon.png" class="zs-icon displayFlex unitKind auto_cens auto_pos" alt="">
            </div>
            <div id="echartsScjd" class="content_qk_con displayFlex unitKind allInRoll cnimaLoop autoPosition">
              <div class="echartsScjd_tit displayFlex unitKind allInRoll space_betweens spaceSize dasAutoSlight space_between">
                <span class="echartsScjd_tit_lie unitKind allInRoll cnimaLoop">工单编号</span>
                <span class="echartsScjd_tit_lie unitKind allInRoll cnimaLoop">工单进度</span>
                <span class="echartsScjd_tit_lie unitKind allInRoll cnimaLoop">需求日期</span>
              </div>
              <div v-for="(item,index) in scjdData" :key="index" v-if="index<=6" class="echartsScjd_content displayFlex unitKind allInRoll space_betweens spaceSize dasAutoSlight space_between">
                <div class="echartsScjd_content_lie displayFlex unitKind allInRoll">{{item.workorderCode}}</div>
                <div class="echartsScjd_content_lie displayFlex unitKind allInRoll">
                  <div v-for="(item,index) in item.ganttDataList" v-if="index<=3" :key="index" style="width:24%;margin-right:1%" class="res resesx reses flo_l">
                    <el-tooltip placement="bottom" :content="'工序:'+item.process+' 产品名称:'+item.product+' 完成比列:'+((item.progress*100)<=100?(item.progress*100):100)+'%'">
                      <el-progress :text-inside="true" :stroke-width="16" :percentage="(item.progress*100)<=100?(item.progress*100):100" :color="item.color"></el-progress>
                    </el-tooltip>
                  </div>
                </div>
                <div class="echartsScjd_content_lie displayFlex unitKind allInRoll">{{item.requestDate}}</div>
              </div>
            </div>
          </div>
          <div class="content_left_cphgl content_qk displayFlex unitKind allInRoll cnimaLoop autoPosition">
            <div class="content_qk_tit displayFlex unitKind allInRoll cnimaLoop res resex autoPosition">
              <img src="../../assets/bigdataStyle/images/sj-icon.png" class="sj-icon displayFlex unitKind" alt="">
              <span class="displayFlex unitKind">产品合格率</span>
              <img src="../../assets/bigdataStyle/images/zs-icon.png" class="zs-icon displayFlex unitKind auto_cens auto_pos" alt="">
            </div>
            <div id="echartsCphgl" class="content_qk_con displayFlex unitKind allInRoll cnimaLoop autoPosition"></div>
            <div id="echartsQxzb" class="content_qk_con displayFlex unitKind allInRoll cnimaLoop autoPosition abs absesx autoAbs"></div>
            <div id="pjz_tips" class="autoPosition abs absesx autoAbs"><span></span>平均值</div>
          </div>
       </div>
       <div class="content_center displayFlex unitKind allInRoll cnimaLoop autoPosition layoutSize res resesx resuilt autoRes">
         <div class="content_center_head unitKind allInRoll cnimaLoop autoPosition absesx abs autoAbsFlex space_beens space_between space_auto">
              <div v-for="(item,index) in contentCenterHeadData" :key="index" class="content_center_head_lie">
                <div class="content_center_head_lie_top">
                    {{item.num}}<span>{{item.unit}}</span>
                </div>
                <div class="content_center_head_lie_bottom">
                    {{item.text}}
                </div>
              </div>
         </div>
         <div class="map_box unitKind allInRoll cnimaLoop autoPosition absesx abses auto_cenp autoAbsFlex space_beens">
          <dv-flyline-chart class="unitKind allInRoll cnimaLoop autoPosition absesx autoAbsFlex space_beens" :config="mapDataInit.mapConfig" style="width:100%;height:100%;" />
         </div>
         <img class="map_tuo unitKind allInRoll cnimaLoop autoPosition absesx auto_cenp autoAbsFlex" src="../../assets/bigdataStyle/images/map_tuo.png" alt="">
         <div class="content_center_bottom unitKind allInRoll cnimaLoop autoPosition absesx abs autoAbsFlex space_beens space_between space_auto">
           <div class="content_center_bottom_left unitKind allInRoll cnimaLoop autoPosition layoutSize res resesx autoRes">
              <div class="content_center_bottom_tit displayFlex unitKind allInRoll cnimaLoop res resex autoPosition">
                <img src="../../assets/bigdataStyle/images/sj-icon.png" class="sj-icon displayFlex unitKind" alt="">
                <span class="displayFlex unitKind">员工绩效TOP5</span>
                <img src="../../assets/bigdataStyle/images/zs-icon.png" class="zs-icon displayFlex unitKind auto_cens auto_pos" alt="">
              </div>
              <div id="echartsYgjxTop" class="displayFlex unitKind auto_censps"></div>
              <div class="ygpmTab displayFlex unitKind auto_censps abs absesx autoAbs">
                <span :class="{'opc1':bgtbIndex==0}" @click="bgpmTab(0)">销售排名</span>
                <!-- <span :class="{'opc1':bgtbIndex==1}" @click="bgpmTab(1)">销售排名</span> -->
              </div>
           </div>
           <div class="content_center_bottom_right unitKind allInRoll cnimaLoop autoPosition layoutSize">
              <div class="content_center_bottom_tit displayFlex unitKind allInRoll cnimaLoop res resex autoPosition">
                <img src="../../assets/bigdataStyle/images/sj-icon.png" class="sj-icon displayFlex unitKind" alt="">
                <span class="displayFlex unitKind">不良品分析</span>
                <img src="../../assets/bigdataStyle/images/zs-icon.png" class="zs-icon displayFlex unitKind auto_cens auto_pos" alt="">
              </div>
              <div id="EchartsBlpHgl" class="displayFlex unitKind auto_censps"></div>
           </div>
         </div>
       </div>
       <div class="content_right displayFlex unitKind allInRoll cnimaLoop autoPosition layoutSize">
          <div class="content_right_gxbhgbl content_qk displayFlex unitKind allInRoll cnimaLoop autoPosition">
            <div class="content_qk_tit displayFlex unitKind allInRoll cnimaLoop res resex autoPosition">
              <img src="../../assets/bigdataStyle/images/sj-icon.png" class="sj-icon displayFlex unitKind" alt="">
              <span class="displayFlex unitKind">工序不合格比列</span>
              <img src="../../assets/bigdataStyle/images/zs-icon.png" class="zs-icon displayFlex unitKind auto_cens auto_pos" alt="">
            </div>
            <div id="echartsGxbhgbl" class="content_qk_con displayFlex unitKind allInRoll cnimaLoop autoPosition"></div>
          </div>
          <div class="content_right_gxbhgbl content_qk displayFlex unitKind allInRoll cnimaLoop autoPosition">
            <div class="content_qk_tit displayFlex unitKind allInRoll cnimaLoop res resex autoPosition">
              <img src="../../assets/bigdataStyle/images/sj-icon.png" class="sj-icon displayFlex unitKind" alt="">
              <span class="displayFlex unitKind">设备巡检率</span>
              <img src="../../assets/bigdataStyle/images/zs-icon.png" class="zs-icon displayFlex unitKind auto_cens auto_pos" alt="">
            </div>
            <div id="echartsSbfzl" class="content_qk_con displayFlex unitKind allInRoll cnimaLoop autoPosition"></div>
          </div>
          <div class="content_right_gxbhgbl content_qk displayFlex unitKind allInRoll cnimaLoop autoPosition">
            <div class="content_qk_tit displayFlex unitKind allInRoll cnimaLoop res resex autoPosition">
              <img src="../../assets/bigdataStyle/images/sj-icon.png" class="sj-icon displayFlex unitKind" alt="">
              <span class="displayFlex unitKind">销售客户排名 采购供应商排名</span>
              <img src="../../assets/bigdataStyle/images/zs-icon.png" class="zs-icon displayFlex unitKind auto_cens auto_pos" alt="">
            </div>
            <div id="echartsXsGys" class="content_qk_con displayFlex unitKind allInRoll cnimaLoop autoPosition"></div>
          </div>
       </div>
    </section>
    <div id="inSystem" class="clearfix displayFlex flexSit space_betweens spaceSize dasAutoSlight unitKind abs absosx absolte">
      <router-link to="/"><dv-decoration-7 style="width:150px;height:30px;font-size:0.18rem;color:#7ec699;padding:0 10px;"><span>进入系统</span></dv-decoration-7></router-link>
    </div>
  </div>
</template>

<script>
import echarts from "echarts"
import $ from 'jquery'
import request from '@/utils/request'

export default {
  data() {
    return {
      msg: "Hello World",
      bgtbIndex:0,
      contentCenterHeadData:[{
        num:0,
        text:"本年销售总额",
        unit:"万元"
      },{
        num:0,
        text:"本年欠款总额",
        unit:"万元"
      },{
        num:0,
        text:"去年同期销售总额",
        unit:"万元"
      },{
        num:0,
        text:"去年同期欠款总额",
        unit:"万元"
      },{
        num:0,
        text:"在制工单总数",
        unit:"个"
      },{
        num:0,
        text:"在制任务总数",
        unit:"个"
      },{
        num:0,
        text:"今日产出数",
        unit:"个"
      },{
        num:0,
        text:"今日报工数",
        unit:"个"
      }],
      scjdData:[],
      mapDataInit:{
        mapConfig:{
          curvature:7,
          k:-1,
          flylineRadius:300,
          lineWidth:2,
          centerPoint: [0.72, 0.33],
          points: [
            [0.89, 0.17],
            [0.81, 0.22],
            [0.81, 0.30],
            [0.60, 0.30],
            [0.37, 0.32],
            [0.62, 0.38],
            [0.36, 0.40],
            [0.47, 0.50],
            [0.57, 0.51],
            [0.63, 0.56],
            [0.71, 0.51]
          ],
          bgImgUrl: require('@/assets/bigdataStyle/images/map.png'),
          // centerPointImg: {
          //   url: ''
          // },
          pointsImg: {
            url: require('@/assets/bigdataStyle/images/guagnquan.gif'),
            width: 30,
            height: 30
          }
        },
        mapInit:"auto"
      }
    }
  },
  beforeCreate() {
    this.rootSize();
  },
  mounted() {

    // request({
    //     url: '/sale/order/getProcessPercentage',
    //     method: 'get',
    //     params: {"range":""}
    // }).then(res => {
        
    // }); 

    //销售欠款额
    this.getXsQkData();

    //销售订单
    this.getXsddData();

    //产品合格率
    this.getCphglData();
    
    //员工排名
    this.getYgjxData();

    //不良品blpfxInit
    this.getBlpData();

    //工序不合格比列
    this.getGxbhgblDtata();

    //设备负载率
    this.sbfzlInit();

    //销售客户排名 采购供应商排名
    this.getXsCgPmData();
    this.xsGysInit();

    //生产进度
    this.getScjdData();

    //在职工单总数
    this.getZzgdData();

    //在职任务总数
    this.getZzrwData();

    //今日产出数
    this.getJrccData();

    //今日报工数
    this.getJrbgsData();

  },
  methods:{
    getXsddData(){
      request({
          url: '/bigData/getSales',
          method: 'get'
      }).then(res => {
          let timeLine = [];
          let salesNum = []
          let returnNum = [];
          let rate = [];
          res.data.rate.forEach(item => {
            timeLine.push(item.month);
          });
          res.data.salesNum.forEach(item => {
            salesNum.push(item.salesNum);
          });
          res.data.returnNum.forEach(item => {
            returnNum.push(item.returnNum);
          });
          res.data.rate.forEach(item => {
            rate.push(item.rate);
          });
          this.xsddInit(timeLine,salesNum,returnNum,rate);
      });
    },
    getCphglData(){
      request({
        url: '/bigData/getQualified',
        method: 'get'
      }).then(res => {
        let avgNum = res.data.avg;
        let dateArray = [];
        let normalArray = [];
        res.data.productQualified.forEach(item => {
          dateArray.push(item.inspect_date);
        });
        res.data.productQualified.forEach(item => {
          normalArray.push(item.normal);
        });
        this.cphglLineInit(avgNum,dateArray,normalArray,res.data.productQualified);
        //缺陷占比
        this.qxzbInit(res.data.productQualified[0]);
      })
    },
    getGxbhgblDtata(){
      request({
        url: '/bigData/getProcess',
        method: 'get'
      }).then(res => {
        this.gxbhgblInit(res.data);
      })
    },
    getBlpData(){
      request({
        url: '/bigData/getUnqualified',
        method: 'get'
      }).then(res => {
        let timeLine = [];
        let blpNum = [];
        let blpRate = [];
        res.data.unqualifiedNum.forEach(item => {
          timeLine.push(item.month);
          blpNum.push(item.unqualified_number);
        });
        res.data.unqualifiedRate.forEach(item => {
          blpRate.push(item.rate.toFixed(2));
        });
        this.blpfxInit(timeLine,blpNum,blpRate);
      })
    },
    getXsCgPmData(){
      request({
        url: '/bigData/getPurchase',
        method: 'get'
      }).then(res => {
        let timeLine = [];
        let xsData = [];
        let gysData = [];
        res.data.salesNum.forEach(item => {
          timeLine.push(item.month);
          xsData.push(item.salesNum);
        });
        res.data.purchaseNum.forEach(item => {
          gysData.push(item.num);
        });
        this.xsGysInit(timeLine,xsData,gysData);
      })
    },
    getXsQkData(){
      request({
        url: '/bigData/getTotal',
        method: 'get'
      }).then(res => {
        this.contentCenterHeadData[0].num = (res.data.thisTotal/10000).toFixed(2);
        this.contentCenterHeadData[1].num = (res.data.thisDebt/10000).toFixed(2);
        this.contentCenterHeadData[2].num = (res.data.lastTotal/10000).toFixed(2);
        this.contentCenterHeadData[3].num = (res.data.lastDebt/10000).toFixed(2);
      })
    },
    getScjdData(){
      request({
        url: '/mes/pro/workticket/getProgress',
        method: 'get'
      }).then(res => {
        this.scjdData = res.rows;
      })
    },
    getZzgdData(){
      request({
        url: '/mes/pro/workticket/getUnfinishedNum',
        method: 'get'
      }).then(res => {
        this.contentCenterHeadData[4].num = res.data;
      })
    },
    getZzrwData(){
      request({
        url: '/mes/pro/protask/getNum',
        method: 'get'
      }).then(res => {
        this.contentCenterHeadData[5].num = res.data;
      })
    },
    getJrccData(){
      request({
        url: '/mes/wm/productproduce/getTodayNum',
      }).then(res => {
        this.contentCenterHeadData[6].num = res.data;
      })
    },
    getJrbgsData(){
      request({
        url: '/mes/pro/feedback/getTodayNum',
      }).then(res => {
        this.contentCenterHeadData[7].num = res.data;
      })
    },
    getYgjxData(){
      request({
        url: '/mes/pro/feedback/getFeedbackRanking',
      }).then(res => {
        let nameArray = [];
        let numArray = [];
        if(res.data.length != 0){
          res.data.forEach(item => {
            nameArray.push(item.nick_name);
            numArray.push(item.total);
          });
          this.ygjxTop5(nameArray,numArray);
        }else{
          this.ygjxTop5(["张可欣","王海南","李丽","刘振宇","马成"],[56,89,99,108,119]);
        }
        
      })
    },
    getXspmData(){
      request({
        url: '/bigData/getSalesPersonRanking',
      }).then(res => {
        let nameArray = [];
        let numArray = [];
        res.data.forEach(item => {
          nameArray.push(item.SALES_PERSON);
          numArray.push(item.total);
        });
        this.ygjxTop5(nameArray,numArray);
      })
    },
    bgpmTab(index){
      this.bgtbIndex = index
      if(index == 0){
         this.getYgjxData();
      }else{
         this.getXspmData();
      }
    },
    xsGysInit(timeLine,xsData,gysData){
     let option = {
        title: {
          show:false,
          text: 'Dynamic Data'
        },
        grid:{
          bottom:"10%",
          left:"12%",
          right:"5%",
          containLabel: false
        },
        tooltip:[{
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#283b56'
            }
          }
        }],
        legend: {
          data: ['销售客户','采购供应商'],
          top:"6%",
          icon:"rect",
          itemWidth:12,
          itemHeight:4,
          textStyle: {
              color: '#fff',
              fontSize: 12, 
          }
        },
        toolbox: {
          show: false,
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: [
          {
            type: 'category',
            splitLine:{
              show:false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#fff',
                fontSize:12,
                lineStyle:{
                  color:"rgba(216, 216, 216, 0.20)"
                }
            },
            boundaryGap: true,
            data: timeLine,
            boundaryGap:[10,10]
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine:{
              show:false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#fff',
                fontSize:12,
                lineStyle:{
                  color:"rgba(216, 216, 216, 0.20)"
                }
            },
            scale: true,
            name: '',
             nameTextStyle: {
                color: '#fff'
            }
          }
        ],
        series: [
          {
            name: '销售客户',
            barWidth:10,
            type: 'bar',
            itemStyle: {
                 barBorderRadius: [8,8,0,0],
                 color: new echarts.graphic.LinearGradient(
                      0, 1, 0, 0, 
                      [
                          {offset: 0, color: 'rgba(43, 60, 254, 0)'},  
                          {offset: 1, color: 'rgba(43, 60, 254, 1)'}
                      ]
                  )
            },
            data: xsData
          },
          {
            name: '采购供应商',
            type: 'bar',
            barWidth:10,
            data: gysData,
            itemStyle: {
                 barBorderRadius: [8,8,0,0],
                 color: new echarts.graphic.LinearGradient(
                      0, 1, 0, 0, 
                      [
                          {offset: 0, color: 'rgba(102, 255, 255, 0)'},  
                          {offset: 1, color: 'rgba(102, 255, 255, 1)'}
                      ]
                  )    
            }
          }
        ]
      };
      
      this.commonEcharts("echartsXsGys",option);
    },
    sbfzlInit(){
      let option = {
          tooltip: {
              trigger: 'axis'
          },
          legend: {
            top:'5%',
            icon:'rect',
            itemWidth:12,
            itemHeight:4,
            textStyle: {
                color: '#fff'
            },
            data: ['设备1', '设备2'] //设备巡检率 = （实际巡检的设备数 ÷ 计划应巡检的设备数） × 100%
          },
          grid: {
            top: '18%',
            left: '5%',
            right: '5%',
            bottom: '2%',
            containLabel: true
          },
          xAxis: {
              axisLabel: {
                  color: '#fff'
              },
              axisLine: {
                  lineStyle: {
                      color: 'rgba(216, 216, 216, 0.20)'
                  }
              },
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
              type: 'value',
              splitLine:{show:false},
              axisLabel: {
                  color: '#fff',
                  formatter: function (value) {
                      return value + '%';
                  }
              },
              axisLine: {
                  lineStyle: {
                      color: 'rgba(216, 216, 216, 0.20)'
                  }
              },
          },
          series: [{
              name: '设备1',
              type: 'line',
              smooth: true,
              itemStyle:{
                color: 'rgba(229, 47, 148, 1)',
                normal: {
                    color: 'rgba(229, 47, 148, 1)',
                    borderColor: 'rgba(229, 47, 148, 1)',
                    borderWidth: 2
                }
              },
              lineStyle: {
                  color: 'rgba(229, 47, 148, 1)', 
                  width: 5, 
              },
              areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 1,
                      color: 'rgba(229, 47, 148, 0.3)'
                    }, {
                      offset: 0,
                      color: 'rgba(229, 47, 148, 0.3)'
                    }], false)
                }
              },
              data: [20, 32, 10, 113, 90, 23, 21]
          }, {
              name: '设备2',
              type: 'line',
              smooth: true,
              itemStyle:{
                color: 'rgba(54, 98, 236, 1)',
                normal: {
                    color: 'rgba(54, 98, 236, 1)',
                    borderColor: 'rgba(54, 98, 236, 1)',
                    borderWidth: 2
                }
              },
              lineStyle: {
                  color: 'rgba(54, 98, 236, 1)', 
                  width: 5,
              },
              areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'rgba(54, 98, 236, 0.3)'
                    }, {
                      offset: 1,
                      color: 'rgba(54, 98, 236, 0.3)'
                    }], false)
                }
              },
              data: [22, 80, 79, 23, 129, 33, 131]
          }]
      };
      this.commonEcharts("echartsSbfzl",option);
    },
    gxbhgblInit(data){
      let _that = this;
      let xrData = [];
          data.forEach((item,index)=>{
            xrData.push({
              itemStyle:{color:_that.getRandomColorA()},
              name:item.name,
              value:item.num,
            });
          })
      let option = {
            legend: {
              show:false,
              top: 'bottom'
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            toolbox: {
              show: true,
              feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            series: [
              {
                name: '工序不合格比例',
                type: 'pie',
                radius: [15, 100],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                  borderRadius: 8,
                  color: function(params){
                    return params.data.itemStyle.color;
                  }
                },
                label: {
                    show: true,
                    color: '#fff',
                    formatter: '{b}: {c} \n\n ({d}%)'
                },
                data: xrData
              }
            ]
          };
      this.commonEcharts("echartsGxbhgbl",option);
    },
    blpfxInit(timeLine,blpNum,blpRate){
     let option = {
        title: {
          show:false,
          text: 'Dynamic Data'
        },
        grid:{
          bottom:"10%",
          left:"12%",
          right:"12%",
          containLabel: false
        },
        tooltip:[{
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#283b56'
            }
          }
        }],
        legend: {
          data: ['不良品数','不良率'],
          top:"6%",
          icon:"rect",
          itemWidth:12,
          itemHeight:4,
          textStyle: {
              color: '#fff',
              fontSize: 12, 
          }
        },
        toolbox: {
          show: false,
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        dataZoom: {
          show: false,
          start: 0,
          end: 100
        },
        xAxis: [
          {
            type: 'category',
            splitLine:{
              show:false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#fff',
                fontSize:12,
                lineStyle:{
                  color:"rgba(216, 216, 216, 0.20)"
                }
            },
            boundaryGap: true,
            data: timeLine,
            boundaryGap:[10,10]
          },
          {
            show:false,
            type: 'category',
            splitLine:{
              show:false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#fff',
                fontSize:12,
                lineStyle:{
                  color:"rgba(216, 216, 216, 0.20)"
                }
            },
            boundaryGap: true,
            data: timeLine,
            boundaryGap:[10,10]
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine:{
              show:false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#fff',
                fontSize:12,
                lineStyle:{
                  color:"rgba(216, 216, 216, 0.20)"
                }
            },
            scale: true,
            name: '',
             nameTextStyle: {
                color: '#fff'
            }
          },
          {
            type: 'value',
            splitLine:{
              show:false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#fff',
                fontSize:12,
                formatter: '{value} %',
                lineStyle:{
                  color:"rgba(216, 216, 216, 0.20)"
                }
            },
            scale: true,
            name: '',
            nameTextStyle: {
                color: '#fff'
            }
          }
        ],
        series: [
          {
            name: '不良品数',
            barWidth:10,
            type: 'bar',
            xAxisIndex: 0,
            yAxisIndex: 0,
            itemStyle: {
                 barBorderRadius: [8,8,0,0],
                 color: new echarts.graphic.LinearGradient(
                      0, 1, 0, 0, 
                      [
                          {offset: 0, color: 'rgba(7, 185, 185, 0)'},  
                          {offset: 1, color: 'rgba(7, 185, 185, 1)'}
                      ]
                  )
            },
            stack:"fh",
            emphasis: {
              focus: 'series'
            },
            data: blpNum
          },
          {
            name: '不良率',
            type: 'line',
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: blpRate,
            itemStyle: {
              color: "rgba(235, 47, 150, 1)"
            }
          }
        ]
      };
      
      this.commonEcharts("EchartsBlpHgl",option);
    },
    ygjxTop5(nameArray,dataArray){
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          show:false
        },
        grid: {
          top: '20%',
          left: '5%',
          right: '5%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          splitLine: {
            show: false
          },
          axisLabel:{
            color:"#fff",
            fontSize:"12"
          },
          axisLine:{
            show:false
          }
        },
        yAxis: {
          type: 'category',
          data: nameArray,
          axisLabel:{
            color:"#fff",
            fontSize:"12"
          },
          axisLine:{
            show:false
          }
        },
        series: [
          {
            name: '报工数量',
            type: 'bar',
            barWidth:14,
            data:dataArray,
            showBackground: true,
            backgroundStyle:{
              barWidth:14,
              barBorderRadius: 15,
              color: "rgba(231, 231, 231, 0.10)"
            },
            itemStyle: {
              barBorderRadius: 15,
            color: new echarts.graphic.LinearGradient(
                    0, 0, 1, 0, 
                    [
                        {offset: 0, color: 'rgba(44, 60, 254, 1)'},
                        {offset: 1, color: 'rgba(0, 210, 255, 1)'}   
                    ]
                )
            }
          }
        ]
      };
      this.commonEcharts("echartsYgjxTop",option);
    },
    qxzbInit(data){
      let option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'item'
        },
        grid:{
          containLabel:true
        },
        legend: {
            show:false,
            orient: 'vertical',
            left: 'left',
            data: ['缺陷占比']
        },
        radar: {
            radius: '60%',
            splitLine: {
                lineStyle: {
                    color: 'rgba(10, 35, 81, 0.40)', 
                }
            },
            // 雷达图的指示器，表示各个变量的名称
            indicator: [
                { name: '正　　常',max:data.total},
                { name: '轻微缺陷',max:data.total},
                { name: '严重缺陷',max:data.total},
                { name: '致命缺陷',max:data.total}
            ],
            nameGap: 5
        },
        series: [{
            name: '缺陷占比',
            type: 'radar',
            // 开启区域填充
            areaStyle: {
              color:"rgba(102, 255, 255, 1)"
            },
            data: [
                {
                    value: [data.normal, data.min, data.maj, data.cr],
                    name: '缺陷占比',
                    lineStyle:{
                      color:"rgba(102, 255, 255, 1)"
                    }
                }
            ]
        }]
      };
      this.commonEcharts("echartsQxzb",option);
    },
    cphglLineInit(avg,dateAray,normalArray,qxzbData){
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['平均值','我的指标'],
          top:"21%",
          left:"15%",
          textStyle:{
            color:"#fff"
          },
          icon: 'rect',
          itemWidth: 16,
          itemHeight: 4,
          itemStyle: {
              borderColor: 'rgba(235, 47, 150, 1)', 
              borderWidth: 2,         
              color: 'rgba(235, 47, 150, 1)',
          }
        },
        grid: {
          top:"45%",
          bottom:"11%",
        },
        xAxis: {
          axisLabel:{
            color:"#fff"
          },
          splitLine: {
            lineStyle:{
              color: 'rgba(216, 216, 216, 0.20)'
            }
          },
          type: 'category',
          data: dateAray
        },
        yAxis: {
          axisLabel:{
            color:"#fff"
          },
          axisLine: {
            show:false
          },
          splitLine: {
            lineStyle:{
              color: 'rgba(216, 216, 216, 0.20)'
            }
          },
          type: 'value'
        },
        series: [
          {
            markLine: {  
                data: [  
                    {  
                        yAxis: avg, 
                        name: '', 
                        lineStyle: {  
                            color: 'rgba(255, 195, 0, 1)',   
                            type: 'dotted', 
                            width: 2 
                        },  
                        label: {  
                            show: true, 
                            position: 'end', 
                            formatter: '{b}: {c}'  
                        }  
                    } 
                ]  
            },
            name:"我的指标",
            data: normalArray,
            type: 'line',
            lineStyle: {
              color: 'rgba(235, 47, 150, 1)',
              width: 4
            },
            itemStyle: {
              color: '#fff',
              borderWidth: 1,
              borderColor: 'rgba(235, 47, 150, 1)'
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 1,
                  color: 'rgba(235, 47, 150, 0)'
                }, {
                  offset: 0,
                  color: 'rgba(235, 47, 150, 0.50)'
                }], false)
              }
            }
          }
        ]
      };
      this.commonEcharts("echartsCphgl",option,qxzbData);
    },
    xsddInit(timeLine,salesNum,returnNum,rate){

     let option = {
        title: {
          show:false,
          text: 'Dynamic Data'
        },
        grid:{
          bottom:"10%",
          left:"12%",
          right:"12%",
          containLabel: false
        },
        tooltip:[{
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#283b56'
            }
          },
          formatter: function (params) {
              let result = '';
              params.forEach(function (item) {
                  const seriesName = item.seriesName;
                  const value = item.value;
                  result += seriesName=="发货率"?`${seriesName}: ${value}%<br/>`:`${seriesName}: ${value}<br/>`;
              });
              return result;
          }
        }],
        legend: {
          data: ['销售订单额','回款额','发货率'],
          top:"6%",
          icon:"rect",
          itemWidth:12,
          itemHeight:4,
          textStyle: {
              color: '#fff',
              fontSize: 12, 
          }
        },
        toolbox: {
          show: false,
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        dataZoom: {
          show: false,
          start: 0,
          end: 100
        },
        xAxis: [
          {
            type: 'category',
            splitLine:{
              show:false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#fff',
                fontSize:12,
                lineStyle:{
                  color:"rgba(216, 216, 216, 0.20)"
                }
            },
            boundaryGap: true,
            data: timeLine,
            boundaryGap:[10,10]
          },
          {
            show:false,
            type: 'category',
            splitLine:{
              show:false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#fff',
                fontSize:12,
                lineStyle:{
                  color:"rgba(216, 216, 216, 0.20)"
                }
            },
            boundaryGap: true,
            data: timeLine,
            boundaryGap:[10,10]
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine:{
              show:false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#fff',
                fontSize:12,
                lineStyle:{
                  color:"rgba(216, 216, 216, 0.20)"
                }
            },
            scale: true,
            name: '',
             nameTextStyle: {
                color: '#fff'
            }
          },
          {
            type: 'value',
            splitLine:{
              show:false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#fff',
                fontSize:12,
                formatter: '{value} %',
                lineStyle:{
                  color:"rgba(216, 216, 216, 0.20)"
                }
            },
            scale: true,
            name: '',
            nameTextStyle: {
                color: '#fff'
            }
          }
        ],
        series: [
          {
            name: '销售订单额',
            barWidth:10,
            type: 'bar',
            xAxisIndex: 0,
            yAxisIndex: 0,
            itemStyle: {
                 barBorderRadius: [8,8,0,0],
                 color: new echarts.graphic.LinearGradient(
                      0, 1, 0, 0, 
                      [
                          {offset: 0, color: 'rgba(6, 150, 255, 0)'},  
                          {offset: 1, color: 'rgba(6, 150, 255, 1)'}   
                      ]
                  )
            },
            stack:"fh",
            emphasis: {
              focus: 'series'
            },
            data: salesNum
          },
          {
            name: '回款额',
            type: 'bar',
            barWidth:10,
            xAxisIndex: 0,
            yAxisIndex: 0,
            itemStyle: {
                barBorderRadius: [8,8,0,0],
                color: new echarts.graphic.LinearGradient(
                      0, 1, 0, 0, 
                      [
                          {offset: 0, color: 'rgba(235, 47, 150, 0.5)'},  
                          {offset: 1, color: 'rgba(235, 47, 150, 1)'}   
                      ]
                  )
            },
            stack:"fh",
            emphasis: {
              focus: 'series'
            },
            data: returnNum
          },
          {
            name: '发货率',
            type: 'line',
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: rate,
            itemStyle: {
              color: "rgba(102, 255, 255, 1)"
            }
          }
        ]
      };
      
      this.commonEcharts("echartsXsdd",option);
    },
    commonEcharts(ele,option,otherData){
      let _that = this;
      let chartDom = document.getElementById(ele);
      let myChart = echarts.init(chartDom);

      option && myChart.setOption(option);

      $(document).ready(function() {
        myChart.resize();
      });
      window.addEventListener("resize", function() {
        myChart.resize();
      });

      if(ele == "echartsCphgl"){
        myChart.on('mouseover', function (params) {
            params.componentType != "markLine"?_that.qxzbInit(otherData[params.dataIndex]):1;
        });
      }
    },
    getRandomColor() {
      var r = Math.floor(Math.random() * 256);
      var g = Math.floor(Math.random() * 256);
      var b = Math.floor(Math.random() * 256);
      return [`rgba(${r}, ${g}, ${b}, 1)`,`rgba(${r}, ${g}, ${b}, 0)`];
    },
    getRandomColorA() {
      var r = Math.floor(Math.random() * 256);
      var g = Math.floor(Math.random() * 256);
      var b = Math.floor(Math.random() * 256);
      return `rgba(${r}, ${g}, ${b}, 1)`;
    }
  }
}
</script>

<style lang="scss">
#bigdataBox .el-progress-bar__outer{
  background-color: rgba(240, 240, 240, 0.30);
}
#bigdataHtml{
  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    position: absolute
  }

  ::-webkit-scrollbar-thumb {
    background-color: #5bc0de
  }

  ::-webkit-scrollbar-track {
    background-color: #0b111b;
  }

  .hide-scrollbar::-webkit-scrollbar-thumb{
      visibility : hidden;
      display: none;
  }
  .hide-scrollbar{
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    overflow-x: hidden;
    overflow-y: auto;
  }
}
</style>

<style lang="scss" scoped>
@import url("../../assets/bigdataStyle/css/animate.css");
@import url("../../assets/bigdataStyle/css/common.css");

$tcbgOpacity: 0.8;
$textColor: rgb(25, 236, 255);
$textColor2: rgb(25, 180, 189);
$textColorHd: rgba(25, 236, 255, 0.6);
$textFontSizeBigS: 0.18rem;
$textFontSizeBig: 0.17rem;
$textFontSizeSm: 0.15rem;
$textFontSizeSmV: 0.14rem;
$textFontSizeSmS: 0.12rem;

#bigdataBox{
  #header{
    width: 100%;
    height: 1.020833rem;
    background: url("../../assets/bigdataStyle/images/header.png") no-repeat center;
    background-size: 100% 100%;
  }
  #content{
    width: 100%;
    padding: 0 .15rem;
    box-sizing: border-box;
    height: auto;
    padding-bottom: .104167rem;
    .content_qk{
      position: inherit;
      position: relative;
      width: 4.791667rem;
      height: 3.26rem;
      box-sizing: border-box;
      padding: 10px;
      background: url(~@/assets/bigdataStyle/images/qk-bg.png) no-repeat center;
      background-size: 100% 100%;
      margin-bottom: .104167rem;
      &_con{
        width: 100%;
        height: 2.45rem;
        margin-top: 10px;
      }
      &_tit{
        width: 100%;
        height: .375rem;
        line-height: .375rem;
        background: url(~@/assets/bigdataStyle/images/qk-tit-bg.png) no-repeat center;
        background-size: 100% 100%;
        font-size: .166667rem;
        color: #fff;
        padding-left: .083333rem;
        .zs-icon{
          width: .583333rem;
          height: .052083rem;
          right: .083333rem;
        }
        .sj-icon{
          display: inline-block;
          width: .15625rem;
          height: .135417rem;
          margin-right: .104167rem;
        }
      }
      #pjz_tips{
        width:auto;
        position: absolute;
        left: 22.5%;
        top: 27%;
        color: #fff;
        font-size: 12px;
      }
      #pjz_tips span{
        display: block;
        position: absolute;
        left: -0.235rem;
        top: .06rem;
        width: .176667rem;
        height: .062667rem;
        background: rgba(255, 195, 0, 1);
      }
      #echartsQxzb{
        width: 1.8rem;
        height: 1rem;
        position: absolute;
        right: 0.6rem;
        top: 0.6rem;
      }
      #echartsCphgl{
        width: 100%;
        height: 2.45rem;
        div{
          background: transparent!important;
        }
      }
      #echartsScjd{
        box-sizing: border-box;
        padding: 0 .145833rem;
        .echartsScjd_tit{
          width: 100%;
          height: .291667rem;
          line-height: .31rem;
          background: rgba(255,255,255,0.05);
          margin-top: .260417rem;
          padding: 0 10px;
          margin-bottom: .145833rem;
          &_lie{
            color: #fff;
            font-size: 12px;
          }
        }
        .echartsScjd_content{
          margin-bottom: .12rem;
          &_lie{
            font-size: 12px;
            color: #fff;
            letter-spacing: -1px;
          }
          &_lie:nth-child(2){
            width: 2.395833rem;
          }
        }
      }
    }
    .content_left{
      width: 4.791667rem;
      height: auto;
      .content_left_xsdd{
        
      }
    }
    .content_center{
      width: calc(4.84375rem*2 + .1255rem);
      height: inherit;
      .map_box{
        width: 7.291667rem;
        height: 7.125rem;
        top: 1rem;
      }
      .map_tuo{
        width: 11.25rem;
        height: auto;
        top: 5.05rem;
        z-index: 500;
      }
      &_head{
        width: 100%;
        height: 1.5625rem;
        z-index: 1001;
        &_lie{
          width: 1.125rem;
          &_top{
            width: 100%;
            height: 1.041667rem;
            line-height: 1.041667rem;
            font-size: .3125rem;
            color: #FFFFFF;
            text-align: center;
            background: url(~@/assets/bigdataStyle/images/center_head_bg.png) no-repeat center;
            background-size: 100% 100%;
            span{
              font-size: .15625rem;
              opacity: 0.8;
            }
          }
          &_bottom{
            width: 100%;
            text-align: center;
            color: #F3FFFE;
            line-height: .208333rem;
            font-size: .145833rem;
            height: auto;
          }
        }
      }
      &_bottom{
        width: 100%;
        height: 3.26rem;
        bottom: .104167rem;
        left: 0;
        z-index: 1000;
        &_left,&_right{
          width: 4.84375rem;
          height: 3.26rem;
          box-sizing: border-box;
          padding: 10px;
          background: url(~@/assets/bigdataStyle/images/qk-bg.png) no-repeat center;
          background-size: 100% 100%;
          #EchartsBlpHgl{
            width: 100%;
            height: 2.45rem;
            margin-top: .104167rem;
          }
          #echartsYgjxTop{
            width: 100%;
            height: 2.45rem;
            margin-top: .104167rem;
          }
          .ygpmTab{
              width: 100%;
              left: 0;
              top: .78125rem;
              text-align: center;
              span{
                padding: 4px 8px;
                box-sizing: border-box;
                background: #052666;
                border: 1px solid #006CC8;
                color: #fff;
                opacity: 0.5;
                cursor: pointer;
              }
              .opc1{
                opacity: 1;
              }
            }
        }
        &_tit{
          width: 100%;
          height: .375rem;
          line-height: .375rem;
          background: url(~@/assets/bigdataStyle/images/qk-tit-bg.png) no-repeat center;
          background-size: 100% 100%;
          font-size: .166667rem;
          color: #fff;
          padding-left: .083333rem;
          .zs-icon{
            width: .583333rem;
            height: .052083rem;
            right: .083333rem;
          }
          .sj-icon{
            display: inline-block;
            width: .15625rem;
            height: .135417rem;
            margin-right: .104167rem;
          }
        }
      }
    }
    .content_right{
      width: 4.791667rem;
      height: inherit;
    }
  }
  #inSystem{
    position:absolute;
    right: 20px;
    top: 20px;
    z-index: 10000000;
    span{
      padding: 0 8px;
      white-space: nowrap;
    }
  }
}
</style>